@import "./import";
@import "./normalize";

// rem
html {
  font-size: 16px
}

@media screen and (min-width: 375px) {
  html {
    font-size:calc(100% + 2 * (100vw - 375px)/ 39);
    font-size: calc(16px + 2 * (100vw - 375px)/ 39)
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size:calc(112.5% + 4 * (100vw - 414px)/ 586);
    font-size: calc(18px + 4 * (100vw - 414px)/ 586)
  }
}

@media screen and (min-width: 600px) {
  html {
    font-size:calc(125% + 4 * (100vw - 600px)/ 400);
    font-size: calc(20px + 4 * (100vw - 600px)/ 400)
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size:calc(137.5% + 6 * (100vw - 1000px)/ 1000);
    font-size: calc(22px + 6 * (100vw - 1000px)/ 1000)
  }
}



// APP 基础样式
*[contenteditable] {
  -webkit-user-select: auto !important;
}
*:focus {
  outline: none;
}
// 消除输入框的阴影和边框
input,
textarea,
select {
  -webkit-appearance: none;
  outline: none;
  resize: none;
  background-color: transparent;
  text-size-adjust: 100%;
}
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin: 0;
  font-weight: 400;
}
p {
  margin: 0;
}
i,
em {
  font-style: normal;
}

body,
html {
  background-color: $background-color-base;
  height: 100%;
  text-size-adjust: 100%;
}
html {
  font-size: 50px;
  line-height: 1.15;
  text-size-adjust: 100%;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  line-height: 1;
  font-family: $font-family-body;
  font-size: $font-size-base;
  color: $text-color-base;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  //background: url("../assets/images/big.jpg") no-repeat center;
  background-color: #fff;
}
a {
  color: $link-color-base;
  text-decoration: none;
  user-select: none;
  outline: none;

  &:hover {
    color: $link-color-hover
  }
  &:active {
    color: $link-color-active
  }
}
img {
  max-width: 100%;
}



.loader-box {
  width: px2rem(100px);
  height: px2rem(100px);
  display: inline-block;
}

.circular {
  animation: rotate 2s linear infinite;
}

.circular circle {
  animation: circle-dash 1.5s ease-in-out infinite;
}

@keyframes circle-dash {
  0% {
    stroke-dasharray: 1, 125;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 100,125;
    stroke-dashoffset: -25px;
  }

  100% {
    stroke-dasharray: 100,125;
    stroke-dashoffset: -125px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}